<template>
  <div>
    <div class="u-block">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>categroy</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="u-tip">asddsasd</div>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card :body-style="{ padding: '0px' }">
          <img src="http://placehold.it/350x200" class="image">
          <div style="padding: 14px;">
            <span>好吃的汉堡</span>
            <div class="bottom clearfix">
              <time class="time">{{ currentDate }}</time>
              <el-button type="text" class="button">操作按钮</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card :body-style="{ padding: '0px' }">
          <img src="http://placehold.it/350x200" class="image">
          <div style="padding: 14px;">
            <span>好吃的汉堡</span>
            <div class="bottom clearfix">
              <time class="time">{{ currentDate }}</time>
              <el-button type="text" class="button">操作按钮</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card :body-style="{ padding: '0px' }">
          <img src="http://placehold.it/350x200" class="image">
          <div style="padding: 14px;">
            <span>好吃的汉堡</span>
            <div class="bottom clearfix">
              <time class="time">{{ currentDate }}</time>
              <el-button type="text" class="button">操作按钮</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="u-block text-right">
      <el-pagination layout="prev, pager, next" :total="50">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'

/*element*/
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI, { size: 'small' })
export default {
  data(){
    return {
        currentDate:(new Date().toLocaleString())
      }
   }
}

</script>
<style scoped>
.time { font-size: 13px; color: #999; }
.bottom { margin-top: 13px; line-height: 12px; }
.button { padding: 0; float: right; }
.image { width: 100%; display: block; }
.clearfix:before,
.clearfix:after { display: table; content: ""; }
.clearfix:after { clear: both }
</style>
